<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机组卷 - 教材资源管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .question-card {
                transition: all 0.3s ease;
            }
            .question-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            }
            .scale-hover {
                transition: transform 0.2s ease;
            }
            .scale-hover:hover {
                transform: scale(1.02);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <h1 class="text-xl font-bold text-primary flex items-center">
                    <i class="fa fa-book mr-2"></i>
                    <span>教材资源管理系统</span>
                </h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">题库</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">教材版本</a>
                <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">统计分析</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">系统设置</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索题目..." 
                           class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <div class="relative">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                    </button>
                </div>
                
                <div class="flex items-center space-x-2 cursor-pointer group">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                    <span class="hidden md:inline font-medium">张老师</span>
                    <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- 左侧边栏 - 教材版本与章节导航 -->
        <aside id="sidebar" class="w-64 bg-white shadow-md transform -translate-x-full lg:translate-x-0 fixed lg:static h-full z-40 transition-transform duration-300 ease-in-out overflow-y-auto scrollbar-hide">
            <div class="p-4 border-b">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="font-bold text-lg">教材版本导航</h2>
                    <div class="relative">
                        <select class="appearance-none bg-gray-100 rounded-lg px-3 py-1 pr-8 focus:outline-none focus:ring-1 focus:ring-primary">
                            <option>全部学科</option>
                            <option selected>数学</option>
                            <option>物理</option>
                            <option>化学</option>
                            <option>生物</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                    </div>
                </div>
                
                <div class="relative">
                    <input type="text" placeholder="搜索章节..." 
                           class="w-full pl-8 pr-4 py-2 rounded-lg bg-gray-100 focus:outline-none focus:ring-1 focus:ring-primary">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
            
            <!-- 教材版本选择 -->
            <div class="p-4 border-b">
                <h3 class="font-medium text-sm text-gray-500 mb-2">选择教材版本</h3>
                <div class="space-y-2">
                    <div class="relative">
                        <select id="version-selector" class="w-full appearance-none bg-gray-100 rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-1 focus:ring-primary">
                            <option value="RJ-2023" selected>人教版 2023版</option>
                            <option value="SX-2022">苏教版 2022版</option>
                            <option value="BS-2023">北师大版 2023版</option>
                            <option value="HK-2024">沪科版 2024版</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                    </div>
                </div>
            </div>
            
            <!-- 章节树形导航 -->
            <div class="p-4">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-medium text-sm text-gray-500">章节结构</h3>
                    <div class="flex space-x-1">
                        <button id="expand-all" class="text-xs text-gray-500 hover:text-primary">展开</button>
                        <span class="text-gray-300">|</span>
                        <button id="collapse-all" class="text-xs text-gray-500 hover:text-primary">收起</button>
                    </div>
                </div>
                
                <div class="space-y-1">
                    <!-- 章节1 -->
                    <div class="chapter-item">
                        <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                            <div class="flex items-center">
                                <i class="fa fa-book text-primary mr-2"></i>
                                <span class="font-medium">第一章 集合与常用逻辑用语</span>
                            </div>
                            <i class="fa fa-angle-down text-gray-400 transition-transform"></i>
                        </div>
                        
                        <div class="pl-6 mt-1 space-y-1">
                            <div class="section-item">
                                <div class="flex items-center justify-between cursor-pointer hover:bg-gray-50 rounded-lg p-2 transition-colors">
                                    <div class="flex items-center">
                                        <i class="fa fa-bookmark-o text-secondary mr-2"></i>
                                        <span>1.1 集合的含义与表示</span>
                                    </div>
                                    <span class="text-xs bg-blue-100 text-blue-600 px-2 py-0.5 rounded-full">4课时</span>
                                </div>
                                
                                <div class="pl-6 mt-1 space-y-1 tree-line">
                                    <div class="knowledge-item bg-primary/5 border-l-2 border-primary p-2 rounded-r-lg cursor-pointer hover:bg-primary/10 transition-colors">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <i class="fa fa-dot-circle-o text-primary mr-2"></i>
                                                <span>集合的定义</span>
                                            </div>
                                            <span class="text-xs text-gray-500">8题</span>
                                        </div>
                                    </div>
                                    
                                    <div class="knowledge-item hover:bg-gray-50 p-2 rounded-lg cursor-pointer transition-colors">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <i class="fa fa-dot-circle-o text-gray-400 mr-2"></i>
                                                <span>集合的表示方法</span>
                                            </div>
                                            <span class="text-xs text-gray-500">5题</span>
                                        </div>
                                    </div>
                                    
                                    <div class="knowledge-item hover:bg-gray-50 p-2 rounded-lg cursor-pointer transition-colors">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center">
                                                <i class="fa fa-dot-circle-o text-gray-400 mr-2"></i>
                                                <span>元素与集合的关系</span>
                                            </div>
                                            <span class="text-xs text-gray-500">4题</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        
        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-6">
            <div class="container mx-auto">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm text-gray-500 mb-4">
                    <a href="#" class="hover:text-primary">首页</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <a href="#" class="hover:text-primary">教材版本管理</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <a href="#" class="hover:text-primary">人教版 2023版</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <a href="#" class="hover:text-primary">第一章 集合与常用逻辑用语</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <a href="#" class="hover:text-primary">集合的定义</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <span class="text-primary font-medium">随机组卷</span>
                </div>
                
                <!-- 内容标题区 -->
                <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">随机组卷</h2>
                        <p class="text-gray-500 mt-1">从题库中随机抽取题目，生成试卷</p>
                    </div>
                    
                    <div class="flex flex-wrap gap-3 mt-4 md:mt-0">
                        <button id="generate-paper-btn" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors flex items-center">
                            <i class="fa fa-random mr-2"></i> 重新生成试卷
                        </button>
                        <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors flex items-center">
                            <i class="fa fa-download mr-2"></i> 导出试卷
                        </button>
                        <button class="bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors flex items-center">
                            <i class="fa fa-save mr-2"></i> 保存试卷
                        </button>
                    </div>
                </div>
                
                <!-- 试卷信息 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div>
                            <p class="text-gray-500 text-sm mb-1">试卷名称</p>
                            <input type="text" value="集合的定义 - 随机试卷" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary">
                        </div>
                        
                        <div>
                            <p class="text-gray-500 text-sm mb-1">适用班级</p>
                            <select class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary">
                                <option>高一(1)班</option>
                                <option>高一(2)班</option>
                                <option>高一(3)班</option>
                                <option>高一(4)班</option>
                            </select>
                        </div>
                        
                        <div>
                            <p class="text-gray-500 text-sm mb-1">考试时长</p>
                            <div class="flex items-center">
                                <input type="number" value="45" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary">
                                <span class="ml-2 text-gray-600">分钟</span>
                            </div>
                        </div>
                        
                        <div>
                            <p class="text-gray-500 text-sm mb-1">总分</p>
                            <div class="flex items-center">
                                <input type="number" value="100" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary">
                                <span class="ml-2 text-gray-600">分</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 组卷参数 -->
                    <div class="mt-6 pt-6 border-t border-gray-100">
                        <h3 class="font-bold text-lg mb-4">组卷参数设置</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <p class="text-gray-500 text-sm mb-1">题目来源</p>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" checked class="mr-2 h-4 w-4 text-primary focus:ring-primary">
                                        <span>集合的定义 (8题)</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="mr-2 h-4 w-4 text-primary focus:ring-primary">
                                        <span>集合的表示方法 (5题)</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="mr-2 h-4 w-4 text-primary focus:ring-primary">
                                        <span>元素与集合的关系 (4题)</span>
                                    </label>
                                </div>
                            </div>
                            
                            <div>
                                <p class="text-gray-500 text-sm mb-1">题型分布</p>
                                <div class="space-y-3">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 rounded-full bg-blue-500 mr-1"></span>
                                            <span class="text-sm">选择题</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="number" value="4" min="0" max="8" class="w-16 p-1 border border-gray-300 rounded text-center focus:outline-none focus:ring-1 focus:ring-primary">
                                            <span class="ml-2 text-gray-600">题</span>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 rounded-full bg-purple-500 mr-1"></span>
                                            <span class="text-sm">填空题</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="number" value="2" min="0" max="8" class="w-16 p-1 border border-gray-300 rounded text-center focus:outline-none focus:ring-1 focus:ring-primary">
                                            <span class="ml-2 text-gray-600">题</span>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 rounded-full bg-red-500 mr-1"></span>
                                            <span class="text-sm">解答题</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="number" value="2" min="0" max="8" class="w-16 p-1 border border-gray-300 rounded text-center focus:outline-none focus:ring-1 focus:ring-primary">
                                            <span class="ml-2 text-gray-600">题</span>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-1"></span>
                                            <span class="text-sm">判断题</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="number" value="0" min="0" max="8" class="w-16 p-1 border border-gray-300 rounded text-center focus:outline-none focus:ring-1 focus:ring-primary">
                                            <span class="ml-2 text-gray-600">题</span>
                                        </div>
                                    </div>
                                    
                                    <div class="pt-2 mt-2 border-t border-gray-100">
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm font-medium">总计</span>
                                            <span class="text-sm font-medium">8题</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <p class="text-gray-500 text-sm mb-1">难度分布</p>
                                <div class="space-y-3">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-1"></span>
                                            <span class="text-sm">基础题</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="number" value="4" min="0" max="8" class="w-16 p-1 border border-gray-300 rounded text-center focus:outline-none focus:ring-1 focus:ring-primary">
                                            <span class="ml-2 text-gray-600">题 (40%)</span>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 rounded-full bg-yellow-500 mr-1"></span>
                                            <span class="text-sm">中等题</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="number" value="3" min="0" max="8" class="w-16 p-1 border border-gray-300 rounded text-center focus:outline-none focus:ring-1 focus:ring-primary">
                                            <span class="ml-2 text-gray-600">题 (30%)</span>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center">
                                            <span class="inline-block w-2 h-2 rounded-full bg-red-500 mr-1"></span>
                                            <span class="text-sm">较难题</span>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="number" value="1" min="0" max="8" class="w-16 p-1 border border-gray-300 rounded text-center focus:outline-none focus:ring-1 focus:ring-primary">
                                            <span class="ml-2 text-gray-600">题 (20%)</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 试卷预览 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                    <div class="p-6 border-b border-gray-100">
                        <h3 class="font-bold text-lg">试卷预览</h3>
                        <p class="text-gray-500 mt-1">共8道题目，总分100分</p>
                    </div>
                    
                    <!-- 选择题部分 -->
                    <div class="p-6 border-b border-gray-100">
                        <div class="flex items-center mb-4">
                            <span class="text-lg font-bold">一、选择题（共4题，每题5分，共20分）</span>
                            <div class="ml-auto flex space-x-2">
                                <button class="text-gray-400 hover:text-primary transition-colors" title="调整顺序">
                                    <i class="fa fa-random"></i>
                                </button>
                                <button class="text-gray-400 hover:text-warning transition-colors" title="更换题目">
                                    <i class="fa fa-refresh"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 选择题1 -->
                        <div class="mb-8 question-card scale-hover">
                            <p class="text-gray-800 text-lg mb-2">1. 下列各组对象中不能构成集合的是（　　）</p>
                            
                            <div class="pl-6 space-y-2 text-gray-700">
                                <p>A. 北京尼山世界文明论坛的全体参会人员</p>
                                <p>B. 2024年高考数学试卷中的所有难题</p>
                                <p>C. 所有的正方形</p>
                                <p>D. 清华大学2024年入学的全体学生</p>
                            </div>
                            
                            <div class="mt-3 flex items-center text-sm text-gray-500">
                                <span class="flex items-center mr-4"><i class="fa fa-check-circle mr-1 text-green-500"></i> 基础</span>
                                <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2024-02-15</span>
                            </div>
                        </div>
                        
                        <!-- 选择题2 -->
                        <div class="mb-8 question-card scale-hover">
                            <p class="text-gray-800 text-lg mb-2">2. 下列说法中正确的是（　　）</p>
                            
                            <div class="pl-6 space-y-2 text-gray-700">
                                <p>A. 某个村子里的年轻人组成一个集合</p>
                                <p>B. 所有小正数组成一个集合</p>
                                <p>C. 集合{1,2,3}与集合{3,2,1}表示同一个集合</p>
                                <p>D. 这些数组成的集合有五个元素</p>
                            </div>
                            
                            <div class="mt-3 flex items-center text-sm text-gray-500">
                                <span class="flex items-center mr-4"><i class="fa fa-check-circle mr-1 text-green-500"></i> 基础</span>
                                <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2024-02-05</span>
                            </div>
                        </div>
                        
                        <!-- 选择题3 -->
                        <div class="mb-8 question-card scale-hover">
                            <p class="text-gray-800 text-lg mb-2">3. 下列各组对象能确定一个集合的是（　　）</p>
                            
                            <div class="pl-6 space-y-2 text-gray-700">
                                <p>A. 所有很大的实数</p>
                                <p>B. 好心的人</p>
                                <p>C. 1，2，2，3，4，5</p>
                                <p>D. 某单位所有身高超过1.7m的人</p>
                            </div>
                            
                            <div class="mt-3 flex items-center text-sm text-gray-500">
                                <span class="flex items-center mr-4"><i class="fa fa-check-circle mr-1 text-green-500"></i> 基础</span>
                                <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2024-03-12</span>
                            </div>
                        </div>
                        
                        <!-- 选择题4 -->
                        <div class="question-card scale-hover">
                            <p class="text-gray-800 text-lg mb-2">4. 设集合A={x|x是小于5的自然数}，则下列关系正确的是（　　）</p>
                            
                            <div class="pl-6 space-y-2 text-gray-700">
                                <p>A. 0∉A</p>
                                <p>B. 3∈A</p>
                                <p>C. 5∈A</p>
                                <p>D. -1∈A</p>
                            </div>
                            
                            <div class="mt-3 flex items-center text-sm text-gray-500">
                                <span class="flex items-center mr-4"><i class="fa fa-check-circle mr-1 text-yellow-500"></i> 中等</span>
                                <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2024-04-05</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 填空题部分 -->
                    <div class="p-6 border-b border-gray-100">
                        <div class="flex items-center mb-4">
                            <span class="text-lg font-bold">二、填空题（共2题，每题10分，共20分）</span>
                            <div class="ml-auto flex space-x-2">
                                <button class="text-gray-400 hover:text-primary transition-colors" title="调整顺序">
                                    <i class="fa fa-random"></i>
                                </button>
                                <button class="text-gray-400 hover:text-warning transition-colors" title="更换题目">
                                    <i class="fa fa-refresh"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 填空题1 -->
                        <div class="mb-8 question-card scale-hover">
                            <p class="text-gray-800 text-lg mb-2">5. 用列举法表示集合M={m | m ∈ Z，且10/(m+1) ∈ Z} = ______．</p>
                            
                            <div class="mt-3 flex items-center text-sm text-gray-500">
                                <span class="flex items-center mr-4"><i class="fa fa-check-circle mr-1 text-yellow-500"></i> 中等</span>
                                <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2024-01-28</span>
                            </div>
                        </div>
                        
                        <!-- 填空题2 -->
                        <div class="question-card scale-hover">
                            <p class="text-gray-800 text-lg mb-2">6. 已知集合A={1,2,3,4}，B={3,4,5,6}，则A∩B = ______．</p>
                            
                            <div class="mt-3 flex items-center text-sm text-gray-500">
                                <span class="flex items-center mr-4"><i class="fa fa-check-circle mr-1 text-yellow-500"></i> 中等</span>
                                <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2024-03-20</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 解答题部分 -->
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="text-lg font-bold">三、解答题（共2题，每题30分，共60分）</span>
                            <div class="ml-auto flex space-x-2">
                                <button class="text-gray-400 hover:text-primary transition-colors" title="调整顺序">
                                    <i class="fa fa-random"></i>
                                </button>
                                <button class="text-gray-400 hover:text-warning transition-colors" title="更换题目">
                                    <i class="fa fa-refresh"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 解答题1 -->
                        <div class="mb-8 question-card scale-hover">
                            <p class="text-gray-800 text-lg mb-2">7. 已知集合A={x | ax² - 3x + 2 = 0，a ∈ R}，若A中至多只有一个元素，求a的取值范围．</p>
                            
                            <div class="mt-3 flex items-center text-sm text-gray-500">
                                <span class="flex items-center mr-4"><i class="fa fa-check-circle mr-1 text-yellow-500"></i> 中等</span>
                                <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2024-03-10</span>
                            </div>
                        </div>
                        
                        <!-- 解答题2 -->
                        <div class="question-card scale-hover">
                            <p class="text-gray-800 text-lg mb-2">8. 设集合A={x | x² - 3x + 2 = 0}，B={x | x² - ax + a - 1 = 0}，若B⊆A，求实数a的取值范围．</p>
                            
                            <div class="mt-3 flex items-center text-sm text-gray-500">
                                <span class="flex items-center mr-4"><i class="fa fa-check-circle mr-1 text-red-500"></i> 较难</span>
                                <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2024-05-08</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="flex justify-end space-x-4 mb-6">
                    <button class="bg-white border border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 transition-colors flex items-center">
                        <i class="fa fa-save mr-2"></i> 保存为模板
                    </button>
                    <button class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-colors flex items-center">
                        <i class="fa fa-download mr-2"></i> 导出试卷
                    </button>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-center md:text-left mb-4 md:mb-0">
                    <p class="text-sm text-gray-500">© 2025 教材资源管理系统. 保留所有权利.</p>
                </div>
                
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-file-text-o mr-1"></i> 使用条款
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-shield mr-1"></i> 隐私政策
                    </a>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script>
        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('-translate-x-full');
        });
        
        // 章节展开/收起
        document.querySelectorAll('.chapter-item > div:first-child').forEach(item => {
            item.addEventListener('click', function() {
                const content = this.nextElementSibling;
                const icon = this.querySelector('i:last-child');
                
                content.classList.toggle('hidden');
                if (content.classList.contains('hidden')) {
                    icon.classList.remove('fa-angle-down');
                    icon.classList.add('fa-angle-right');
                } else {
                    icon.classList.remove('fa-angle-right');
                    icon.classList.add('fa-angle-down');
                }
            });
        });
        
        // 展开/收起所有章节
        document.getElementById('expand-all').addEventListener('click', function() {
            document.querySelectorAll('.chapter-item > div:first-child').forEach(item => {
                const content = item.nextElementSibling;
                const icon = item.querySelector('i:last-child');
                
                content.classList.remove('hidden');
                icon.classList.remove('fa-angle-right');
                icon.classList.add('fa-angle-down');
            });
        });
        
        document.getElementById('collapse-all').addEventListener('click', function() {
            document.querySelectorAll('.chapter-item > div:first-child').forEach(item => {
                const content = item.nextElementSibling;
                const icon = item.querySelector('i:last-child');
                
                content.classList.add('hidden');
                icon.classList.remove('fa-angle-down');
                icon.classList.add('fa-angle-right');
            });
        });
        
        // 题型数量输入框变化时更新总数
        const typeInputs = document.querySelectorAll('input[type="number"]');
        typeInputs.forEach(input => {
            input.addEventListener('change', updateTotalQuestions);
            input.addEventListener('input', updateTotalQuestions);
        });
        
        function updateTotalQuestions() {
            const typeContainer = document.querySelector('div:has(> p:text-gray-500:text-sm:contains("题型分布"))');
            const inputs = typeContainer.querySelectorAll('input[type="number"]');
            const totalElement = typeContainer.querySelector('.pt-2 .text-sm.font-medium:last-child');
            
            let total = 0;
            inputs.forEach(input => {
                total += parseInt(input.value) || 0;
            });
            
            totalElement.textContent = `${total}题`;
            
            // 检查总数是否超过最大可能题目数
            if (total > 8) {
                showNotification(`题目总数不能超过8题，当前为${total}题`, 'error');
            }
        }
        
        // 重新生成试卷功能
        document.getElementById('generate-paper-btn').addEventListener('click', function() {
            // 显示加载状态
            this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 生成中...';
            this.disabled = true;
            
            // 模拟生成延迟
            setTimeout(() => {
                // 恢复按钮状态
                this.innerHTML = '<i class="fa fa-random mr-2"></i> 重新生成试卷';
                this.disabled = false;
                
                // 显示成功提示
                showNotification('试卷已重新生成', 'success');
                
                // 添加题目卡片动画效果
                const questionCards = document.querySelectorAll('.question-card');
                questionCards.forEach((card, index) => {
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(10px)';
                    
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, index * 100);
                });
            }, 1500);
        });
        
        // 更换题目功能
        document.querySelectorAll('.fa-refresh').forEach(icon => {
            icon.parentElement.addEventListener('click', function() {
                // 获取当前题目区域
                const questionCard = this.closest('div[class*="border-b"]').querySelector('.question-card:last-child');
                
                // 添加动画效果
                questionCard.style.opacity = '0';
                questionCard.style.transform = 'translateX(10px)';
                
                // 模拟更换延迟
                setTimeout(() => {
                    questionCard.style.opacity = '1';
                    questionCard.style.transform = 'translateX(0)';
                    showNotification('题目已更换', 'success');
                }, 500);
            });
        });
        
        // 调整顺序功能
        document.querySelectorAll('.fa-random').forEach(icon => {
            icon.parentElement.addEventListener('click', function() {
                // 获取当前题型区域
                const questionSection = this.closest('div[class*="border-b"]');
                const questionCards = Array.from(questionSection.querySelectorAll('.question-card'));
                
                // 添加动画效果
                questionCards.forEach((card, index) => {
                    card.style.opacity = '0';
                    card.style.transform = 'scale(0.95)';
                    
                    // 打乱顺序
                    setTimeout(() => {
                        if (questionCards.length > 1) {
                            const parent = questionSection.querySelector('.space-y-2').parentElement;
                            const shuffled = [...questionCards].sort(() => Math.random() - 0.5);
                            
                            shuffled.forEach(card => {
                                parent.appendChild(card);
                            });
                        }
                        
                        card.style.opacity = '1';
                        card.style.transform = 'scale(1)';
                    }, index * 100);
                });
                
                showNotification('题目顺序已调整', 'success');
            });
        });
        
        // 通知提示功能
        function showNotification(message, type = 'info') {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = `fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-x-full`;
            
            // 设置通知样式
            if (type === 'success') {
                notification.classList.add('bg-success', 'text-white');
                notification.innerHTML = `<i class="fa fa-check-circle mr-2"></i> ${message}`;
            } else if (type === 'error') {
                notification.classList.add('bg-danger', 'text-white');
                notification.innerHTML = `<i class="fa fa-exclamation-circle mr-2"></i> ${message}`;
            } else {
                notification.classList.add('bg-primary', 'text-white');
                notification.innerHTML = `<i class="fa fa-info-circle mr-2"></i> ${message}`;
            }
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 显示通知
            setTimeout(() => {
                notification.classList.remove('translate-x-full');
            }, 100);
            
            // 自动关闭
            setTimeout(() => {
                notification.classList.add('translate-x-full');
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }
        
        // 导出试卷功能
        document.querySelectorAll('.fa-download').forEach(icon => {
            if (icon.parentElement.textContent.includes('导出试卷')) {
                icon.parentElement.addEventListener('click', function() {
                    this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 导出中...';
                    
                    setTimeout(() => {
                        this.innerHTML = '<i class="fa fa-download mr-2"></i> 导出试卷';
                        showNotification('试卷已成功导出', 'success');
                    }, 1500);
                });
            }
        });
        
        // 保存试卷功能
        document.querySelectorAll('.fa-save').forEach(icon => {
            icon.parentElement.addEventListener('click', function() {
                this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 保存中...';
                
                setTimeout(() => {
                    if (this.textContent.includes('保存为模板')) {
                        this.innerHTML = '<i class="fa fa-save mr-2"></i> 保存为模板';
                        showNotification('已保存为模板', 'success');
                    } else {
                        this.innerHTML = '<i class="fa fa-save mr-2"></i> 保存试卷';
                        showNotification('试卷已保存', 'success');
                    }
                }, 1000);
            });
        });
        
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }
        });
        
        // 初始化页面动画
        document.addEventListener('DOMContentLoaded', function() {
            const questionCards = document.querySelectorAll('.question-card');
            
            questionCards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                
                setTimeout(() => {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });
        });
    </script>
</body>
</html>
